<template>
  <div>
    <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        max-height="510"
        @selection-change="handleSelectionChange">
      <el-table-column
          fixed
          type="selection"
          width="55">
      </el-table-column>
          <el-table-column
              fixed
              prop="name"
              label="姓名"
              sortable
              width="160">
          </el-table-column>
          <el-table-column
              prop="age"
              label="年龄"
              sortable
              width="160">
          </el-table-column>
          <el-table-column
              prop="hobby"
              label="爱好"
              sortable
              width="160">
          </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="editSysTestUser(scope.row.id)" size="mini">修改</el-button>
          <el-button type="primary" @click="deleteSysTestUser(scope.row.id)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PageC :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange" :pageSize="pageSize" :total="total" :currentPage="currentPage"></PageC>
  </div>
</template>

<script>
  import PageC from "@/components/PageC";
  import {deleteSysTestUserById, getSysTestUsers} from "@/api/sysTestUser";
  import {Message} from "element-ui";
  export default {
    name: "SysTestUserTable",
    components: {PageC},
    computed: {
      tableData: {
        get() {
          return this.$store.state.sysTestUser.tableData;
        },
        set(value) {
          this.$store.state.sysTestUser.tableData = value;
        }
      },
      // 选中行id
      multipleSelection: {
        get() {
          return this.$store.state.sysTestUser.multipleSelection;
        },
        set(value) {
          this.$store.state.sysTestUser.multipleSelection = value;
        }
      },
      total: {
        get() {
          return this.$store.state.sysTestUser.total;
        },
        set(value) {
          this.$store.state.sysTestUser.total = value;
        }
      },
      pageSize: {
        get() {
          return this.$store.state.sysTestUser.pageSize;
        },
        set(value) {
          this.$store.state.sysTestUser.pageSize = value;
        }
      },
      currentPage: {
        get() {
          return this.$store.state.sysTestUser.currentPage;
        },
        set(value) {
          this.$store.state.sysTestUser.currentPage = value;
        }
      }
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val.map((item) => {return item.id;})
      },
      getSysTestUsers() {
        var params = {
          "current": this.currentPage,
          "size": this.pageSize
        };
        // 刷新
        getSysTestUsers(params).then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.total;
        })
      },
      editSysTestUser(id) {
        this.$store.dispatch("sysTestUser/editSysTestUser", id);
      },
      deleteSysTestUser(id) {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteSysTestUserById(id).then((res) => {
            Message.success(res.data.msg);
            this.getSysTestUsers();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getSysTestUsers();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getSysTestUsers();
      }
    },
    created() {
      this.getSysTestUsers();
    }
  }
</script>

<style scoped>

</style>